import request from "@/services/interceptors";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { useEffect, useRef } from "react";
import AddOperationTopic from "./AddOperationTopic";
import { enumToObject, ExerciseTypeEnum } from "@/utils/enums";
import { Button, message, Modal } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { useAtom, useAtomValue } from "jotai";
import { enumValuesAtom, labelListAtom, labelListLoader } from "@/store/enum";
import { OperationType } from "@/types";
import MyDrawer from "@/components/MyDrawer";
import OperationDetail from "./OperationDetail";
import EditLabels from "./EditLabels";
import { useAtom as jotaiUseAtom } from "jotai";

const OperationTopic = () => {
  const { courseList } = useAtomValue(enumValuesAtom);
  const labelList = useAtomValue(labelListLoader);
  const actionRef = useRef<ActionType>(null);

  const columns: ProColumns<OperationType>[] = [
    {
      title: "题目ID",
      dataIndex: "exerciseId",
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: "题目编号",
      dataIndex: "exerciseCode",
      hideInSearch: true,
      width: 160,
      render: (text, record) => {
        return (
          <MyDrawer
            title="操作题详情"
            drawerContent={<OperationDetail exerciseId={+record?.exerciseId} />}
          >
            <a type="link">{text}</a>
          </MyDrawer>
        );
      },
    },

    {
      title: "题干",
      dataIndex: "exerciseInfo",
      ellipsis: true,
    },
    {
      title: "题目类型",
      dataIndex: "exerciseType",
      valueEnum: enumToObject(ExerciseTypeEnum),
    },
    {
      title: "课程",
      dataIndex: "courseId",
      valueType: "select",
      fieldProps: {
        options: courseList,
      },
    },
    // {
    //   title: "创建时间",
    //   dataIndex: "createTime",
    //   hideInSearch: true,
    // },
    // {
    //   title: "更新时间",
    //   dataIndex: "updateTime",
    //   hideInSearch: true,
    // },
    {
      title: "标签",
      dataIndex: "labelIds",
      valueType: "select",
      hideInTable: true,
      fieldProps: {
        mode: "multiple",
        options: labelList,
      },
    },
    {
      title: "标签",
      dataIndex: "labelsStr",
      hideInSearch: true,
      render: (_, record) => {
        return (
          <>
            <span>{_}</span>
            <EditLabels
              editData={record}
              onSuccess={() => {
                actionRef.current?.reload();
              }}
            />
          </>
        );
      },
    },
    {
      title: "题目来源",
      dataIndex: "exerciseSource",
      valueEnum: {
        1: {
          text: "系统预设",
          status: "error",
        },
        2: {
          text: "用户添加",
          status: "success",
        },
      },
    },
    {
      title: "操作",
      valueType: "option",
      key: "option",
      render: (text, record, _, action) =>
        record.exerciseSource === 2
          ? [
              <AddOperationTopic
                editData={record}
                trigger={<a>编辑</a>}
                onSuccess={() => action?.reload()}
              />,
              <a
                onClick={() => {
                  Modal.confirm({
                    title: "提示",
                    icon: <ExclamationCircleFilled />,
                    content: "确认删除吗？",
                    okText: "确认",
                    cancelText: "取消",
                    onOk: async () => {
                      await request.sgks.exerciseDeleteDelete({
                        exerciseId: +record.exerciseId,
                      });
                      message.success("删除成功");
                      action?.reload();
                    },
                  });
                }}
              >
                删除
              </a>,
            ]
          : [],
    },
  ];

  // useEffect(() => {
  //   loadLabelValues();
  // }, []);

  return (
    <ProTable<OperationType>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params, sort, filter) => {
        const res = await request.sgks.exerciseListCreate({
          ...params,
          pageNo: params.current,
          pageSize: params.pageSize,
        } as any);
        console.log(params, sort, filter, res, "res");

        return {
          data: res.data.records,
          total: res.data.totalCount,
        };
      }}
      columnsState={{
        persistenceKey: "OperationTopic_List",
        persistenceType: "localStorage",
        defaultValue: {
          option: { fixed: "right", disable: true },
        },
      }}
      rowKey="id"
      search={{
        labelWidth: "auto",
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      pagination={{
        pageSize: 10,
      }}
      dateFormatter="string"
      toolBarRender={() => [
        <AddOperationTopic onSuccess={() => actionRef.current?.reload()} />,
      ]}
    />
  );
};

export default OperationTopic;
